<template>
  <div class="detail">
    <!-- 轮播图 -->
     <van-swipe :autoplay="3000" width="375" height="375">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.url" width="100%" height="100%"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 商品详情 -->
    <div class="shop-info">
      <h1>
        <div v-if="prods.platform === 2" class="logo">
        <img src="../../../src/assets/tao.png" class="taps">
        </div>
         <div v-if="prods.platform === 1" class="logo">
        <img src="../../../src/assets/tian.png" class="taps">
        </div>
        <img src="../../../src/assets/bao.png" class="bao">
       {{ prods.title}}
      </h1>
      <p class="price">
        <van-tag plain type="primary" color="#fa585a" text-color="#fa585a">用券后</van-tag>
         <span class="tip">￥</span>
         {{ prods.price | priceInt}}.
         <span class="tipFloat">{{ prods.price | priceFloat}}</span>
      </p>
      <p class="old-price">
        <span>原价</span>
        <span class="old">￥{{ prods.originPrice }}</span>
        <span class="saleNum">月销量：{{ prods.saleNum }}</span>
      </p>
    </div>
    <!-- 商品展示 -->
    <van-divider
     :style="{ color: '#b1a9a5', borderColor: '#b1a9a5', padding: '10px 80px' ,fontSize: '12px'}"
    >
      淘宝图文详情
    </van-divider>
    <div class="show">
      <div
       v-for= " showImg in showImages"
       :key = "showImg.photo.id">
      <img
       class="show-img"
       v-lazy="showImg.image.url"
       >
      </div>
    </div>
    <!-- 加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
       icon="cart-o" text="购物车"
       :badge="$store.getters.totalAmounts"
       to = "/cart"
        />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
       type="warning"
       text="加入购物车"
       @click= "addToCart"
        />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetails, getDetailBanner } from '@/api/details'
export default {
  name: 'Detail',
  data() {
    return {
      banners: [],
      prods: {},
      showImages: [],
    }
  },
  created() {
    const { id } = this.$route.query
    getDetailBanner(id)
      .then(data => {
        this.banners = data.detail.photo
      })
    getDetails(id)
      .then(data => {
        console.log(data)
        this.prods = data.detail
        this.showImages = data.detail.descContentList
      })
  },
  methods: {
    addToCart() {
      // console.log('添加到购物车')
      const { id, title, image, price } = this.prods
      const currentProduct = {
        id,
        title,
        image,
        price,
        amount: 1,
      }
      // 保存到store中
      this.$store.commit('addToCart', currentProduct)
      // 提示
      this.$toast({
        type: 'success',
        message: '加入成功',
      })
    },
  },
}
// console.log(this.$route.query)
</script>

<style lang="less" scoped>
.shop-info{
  width: 97%;
  height: 200px;
  padding: 15px;
  h1{
    width: 100%;
    font-size: 16px;
    font-weight: normal;
   .logo{
     width: 30px;
     height: 30px;
     display: inline-block;
     margin-right: 10px;
    .taps{
        width: 30px;
        height: 30px;
        }
      }
  .bao{
    width: 50px;
    height: 30px;
    margin-right: 5px;
    }
  }
  .price{
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color:#fa585a;
    padding: 10px;
    .tip{
    font-size: 12px;
    font-weight: normal;
  }
    .tipFloat{
      font-size: 18px;
    }
  }
  .old-price{
    margin: 0;
    font-size: 12px;
    color:#b1a9a5;
    padding: 10px;
    margin-bottom: 20px;
    .old{
      margin-left: 5px;
      text-decoration: line-through;
    }
    .saleNum{
      float: right;
    }
  }
}
.show{
  width: 100%;
  margin-top: 20px;
  .show-img{
    width: 100%;
    height: 100%;
  }
}

</style>
